<template>
  <f7-page name="ckeditorPage" @page:init="pageInit"
           @page:afterin="onPageAfterIn"
           @page:beforeout="pageBeforeOut"
           @page:beforeremove="pageBeforeRemove">
    <!--<f7-navbar>
      <f7-nav-left>
        <f7-link @click="onBack">
          <f7-icon f7="arrow_left"></f7-icon>
        </f7-link>
      </f7-nav-left>
      <f7-nav-title>{{ title ? title : '编辑内容' }}</f7-nav-title>
      <f7-nav-right>
        <f7-link @click="submitCkEditor">
          <span class="link-span">确定</span>
        </f7-link>
      </f7-nav-right>
    </f7-navbar>-->

    <f7-toolbar bottom class="toolbar-one"
                :class="(platform == 'wechat') ? 'wechat-btn' : 'dingding-btn'">
      <f7-link @click="submitCkEditor()">
        <span class="link-span">确定</span>
      </f7-link>
    </f7-toolbar>

    <div class="ckeditorPage-div">
      <ck-editor :content="editorCont"
                 :ckHeight="editorHeight"
                 @changeEditorHtml="changeEditor"
                 @editor="editorFun"></ck-editor>
    </div>
  </f7-page>
</template>
<style>
  .ckeditorPage-div {
    width: 100%;
    min-height: 100%;
    padding: 0px;
  }
</style>
<script>
  import CkEditor from '../components/ckeditor.vue';
  import Utils from '../../js/mod.utils';
  import Storage from '../../js/mod.storage';
  import StringUtils from '../../js/mod.string';

  export default {
    components: {
      CkEditor: CkEditor
    },
    data: function () {
      return {
        platform: '',
        title: '',
        from: '',
        parent_id: -1, // 编辑的内容来自哪里
        id: -1, // 为哪一个编辑
        type: 'add',
        editorCont: '',
        editorHeight: 380,
        autoSaveInterval: null,
        editor: null,
      }
    },
    mounted: function () {
      var _this = this;
      _this.platform = _this.$f7.data.from;
      this.$f7ready((f7) => {
      });
    },
    destroyed() {
      this.onDestroyed();
    },
    methods: {
      pageInit(event, pageData) {
        var _this = this;
        var query = Utils.getParamData(_this);
        _this.from = query.from ? query.from : '';
        _this.title = query.title ? query.title : '';
        _this.type = query.type ? query.type : -1;

        var ckeditorBoxHeight = _this.$$('.ckeditorPage-div').height();
        _this.editorHeight = ckeditorBoxHeight;
        _this.initCkEditorContent();

      },
      onPageAfterIn() {
        var _this = this;
        Utils.setTitle(_this, '编辑内容');
        Utils.setBack(_this, function (e) {
          //_this.onBack();
          _this.submitCkEditor();
        });
      },
      pageBeforeOut(event, pageData) {
        const _this = this;
      },
      initCkEditorContent: function (_query) {
        const _this = this;
        var contentLoc = Storage.local.get('sd_ckeditor_content');
        contentLoc = contentLoc ? contentLoc : '';
        var data = StringUtils.toJson(contentLoc);
        _this.from = data.from ? data.from : '';
        _this.editorCont = data.editorCont ? data.editorCont : '';
      },
      changeEditor: function (msg) {
        var _this = this;
        _this.editorCont = msg;
      },
      editorFun: function (editor) {
        var _this = this;
        _this.editor = editor;
      },
      submitCkEditor: function () {
        var _this = this;
        // Quill
        var content = _this.editor ? _this.editor.container.firstChild.innerHTML : '';
        // ckeditor
//        var content = _this.editor ? _this.editor.getData() : '';
        if (content) {
          _this.editorCont = (content == '<p>&nbsp;</p>' || content == '<p><br></p>') ? '' : content;
        }
        switch (_this.from) {
          case 'dingding_add':
            Utils.fireEvent(_this, Utils.kEvents.ckeditor_add,
                _this.editorCont);
            _this.$f7router.back();
            break;
          case 'add-activity':
            Utils.fireEvent(_this, Utils.kEvents.updateActivityContent,
                _this.editorCont);
            _this.$f7router.back();
            break;
          case 'add-workflow':
            Utils.fireEvent(_this, Utils.kEvents.updateWorkflowContent,
                _this.editorCont);
            _this.$f7router.back();
            break;
          case 'add-law':
            Utils.fireEvent(_this, Utils.kEvents.updateLawContent,
                _this.editorCont);
            _this.$f7router.back();
            break;
        }
      },
      pageBeforeRemove() {
        let _this = this;
      },
      onDestroyed() {
      },
      onBack() {
        let _this = this;
        _this.$f7router.back();
      },
    },
  }
</script>
